﻿<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>弹出层打印预览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap-slider.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../static/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../../static/font-awesome-4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="../../../static/js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="../../../static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../static/js/zrender.js"></script>


    <script type="text/javascript" src="../../../static/layer/layer.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/moment-with-locales.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-slider.min.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/BootstrapMenu.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="../../../static/js/utils/CommonUtils.js"></script>
    <script type="text/javascript" src="../../../static/js/utils/Base64Utils.js"></script>

    <!-- 自定义css-->
    <link rel="stylesheet" type="text/css" href="../../../static/css/layer/middle_printPreviewLayer.css"/>
    <!--自定义js-->
    <script src="../../../static/js/layer/middle_printPreviewLayer.js" type="text/javascript"></script>
    <script src="../../../static/js/html2canvas.min.js" type="text/javascript"></script>
    <script src="../../../static/js/canvg.min.js" type="text/javascript"></script>
    <script src="../../../static/js/jquery.jqprint-0.3.js" type="text/javascript"></script>
</head>
<style>
    .meta-Content {
        text-align: center;
    }

    .meta-Content label:nth-child(odd) {
        display: inline-block;
        height: 20px;
        font-size: 15px;
        width: 7%;
        text-align: left;
        line-height: 22px;
    }

    .meta-Content label:nth-child(even) {
        display: inline-block;
        height: 20px;
        font-size: 15px;
        width: 10%;
        text-align: left;
        line-height: 22px;
    }

    #buttons {
        text-align: right;
    }

    #buttons .buttons {
        margin: 5px;
        padding: 2px;
    }
</style>

<script type="text/javascript">
    $(function () {

        //url请求参数集合
        window.RequestUrl = getUrlRequest();
        var labcode = RequestUrl["labcode"]; //实验室编码
        if (labcode == "") {
            labcode = $.cookie('labcode');
        }
        var primarykey = RequestUrl["primarykey"]; //primarykey
        if (primarykey == "") {
            primarykey = $.cookie('primarykey');
        }
        var testunitno = RequestUrl["testunitno"]; //台位号
        if (testunitno == "") {
            testunitno = primarykey.substring(primarykey.length() - 2);
        }
        //YYI
       /* labcode = "Haierrefrigerator20151214";
        testunitno = "1";
        //YYI
        primarykey = "2017-11-1611:17:211";*/
       var labcode = $.cookie("labcode");
       var primarykey = $.cookie("nowprimarykey");
       var testunitno = $.cookie("testunitno");
        //设置铭牌信息
        setMataData(labcode, testunitno);
        //1.1获取redis中的div数据
        let url = "http://localhost/consumer/CurveInfoAPI/getDivCruveData";

        getImageDataToRedis(url, primarykey);
        //1.2获取redis中的canvas数据
        //1.3获取redis中的左侧传感器数据
        url = "http://localhost/consumer/CurveInfoAPI/getLeftSensorData";

        getLeftSensorDataToRedis(url, primarykey);
    });


    //打印
    function print() {
        //将要截取区域中包含的svg转换为canves
        svgToCanvas($("#curveArea"));

        var image = new Image();
        var pageWidth = $("#printArea").width();
        var pageHeight = $("#printArea").height();
        html2canvas($("#printArea"), {
            //设置为同步执行(此语句并不起作用)
            async: false,
            // $("body")是你要复制生成canvas的区域，可以自己选
            onrendered: function (canvas) {
                image.src = canvas.toDataURL("image/png");
                //注意:canvas无法使用jqprint实现打印,需要将canvas转换为img)
                //注意使用jquery获取canvas的方式
                var showConvas = $("#printContent canvas")[0];
                //$(convertCanvasToImage(showConvas)).jqprint();
                $(image).jqprint({
                    debug: false,
                    importCSS: true,
                    printContainer: true,
                    operaSupport: false
                });
                // $("#printArea").jqprint({
                //     debug: false,
                //     importCSS: true,
                //     printContainer: true,
                //     operaSupport: false
                // });
            },
            width: pageWidth,
            height: pageHeight
        })
    }

    //另存为图片
    function SaveAs() {
        //将svg转为canvas
        svgToCanvas($("#curveArea"));
        html2canvas(document.getElementById("printArea"), {
            onrendered: function (canvas) {
                var imgURL = canvas.toDataURL("image/png");
                $('#down_qr').attr('href', imgURL);
                $('#down_qr').attr('download', 'demo.png' );
            }
        });
    }

    //退出
    function closeCurrentPage() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>

<body>
<!--打印预览显示区域-->
<div id="printArea">
    <!--铭牌信息显示区域,-->
    <div id="meta-content" class="meta-Content"></div>
    <!--曲线显示区域-->
    <div id="curveArea" class="middle_curve"></div>
    <!--左侧传感器显示区域-->
    <div id="leftSensorData"></div>
</div>

<div id="buttons">
    <input id="print" class="buttons" onclick="print()" value="打印"/>
    <a id="down_qr" type="button">
        <input id="save_as" class="buttons" onclick="SaveAs()" value="另存为">
    </a>
    <input id="exit" class="buttons" onclick="closeCurrentPage()" value="退出">
</div>

</body>
</html>
